<script setup>
    // 文件是存储代码的物理实体，而模块则是一种逻辑组织代码的方式。
    // 导出模块
    // export和export default均可用于导出常量，函数，文件，模块等。
    // 在Node.js中，一个模块通常对应一个文件，文件名就是模块的名称。这样做有助于提高代码的可读性和可维护性，同时也简化了模块的引入和导出。
    import useUserListStore from "@/stores/user/User.js";
    import { storeToRefs } from "pinia";
    import {ref} from "vue";
    import {useRoute} from "vue-router";

    import router from "@/router/index.js";


    // 生成对象
    const useUserList = useUserListStore();
    const {userList} = storeToRefs(useUserList);

    const route = useRoute();


    const title = route.query.index ? "修改地址" : "新建地址";
    // 找到当前用户的地址列表
    const {addressList} = userList.value.find(item=>item.name==="zhangsan");
    // 定义文本框对象
    let address = ref({city:"",community:"",hoseNumber:"",address_text:"",name:"",phone:""});

    // 如果有id,为修改，通过id获取仓库中的地址，并向输入框赋值
    if (route.query.index) {
        // addressList[route.query.index]
        console.log(addressList[route.query.index]);
        // let {name,phone,city,community,hoseNumber,address_text} = addressList[route.query.index];
        address.value=JSON.parse(JSON.stringify(addressList[route.query.index]));
    }

        // 新增或修改
    const saveUp = ()=>{

        address.value.address_text = address.value.city+ " "+address.value.community+address.value.hoseNumber;
        // 有id为编辑
        if (route.query.index) {
            console.log(address.value);
            addressList[route.query.index]=JSON.parse(JSON.stringify(address.value));
        }else{  //无id为添加
        // 去除响应 用JSON.parse(JSON.stringify()); 两次转换能去除响应

        addressList.push(JSON.parse(JSON.stringify(address.value)));
        address.value = {city:"",community:"",hoseNumber:"",address_text:"",name:"",phone:""};
        }


        // console.log(route.query.id)
        router.replace({
            name:'address',
            // address_text
            params:{from:route.params.from},
            query:{shopName:route.query.shopName,id:route.query.id}
        })
    }


</script>

<template>
  <div class="create_address">
        <div class="create_address_header">
            <span class="iconfont title_back" @click="$router.back()">&#xe697;</span>
            <div class="title_text">{{title}}</div>
            <div class="save" @click="saveUp">保存</div>
       </div>
        <div class="create_address_form">
            <div class="form_item">
                <div class="form_item_label">所在城市:</div>
                <input type="text" class="form_item_content" placeholder="如北京市" v-model="address.city">
            </div>
            <div class="form_item">
                <div class="form_item_label">小区/大厦/学校:</div>
                <input type="text" class="form_item_content" placeholder="如理工大学国防科技园" v-model="address.community">
            </div>
            <div class="form_item">
                <div class="form_item_label">楼号-门牌号:</div>
                <input type="text" class="form_item_content" placeholder="如A号楼B层" v-model="address.hoseNumber">
            </div>
            <div class="form_item">
                <div class="form_item_label">收货人:</div>
                <input type="text" class="form_item_content" placeholder="请填写收货人姓名" v-model="address.name">
            </div>
            <div class="form_item">
                <div class="form_item_label">联系电话:</div>
                <input type="text" class="form_item_content" placeholder="请填写收货手机号" v-model="address.phone">
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
@import "@/style/viriables.scss";
.create_address {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: $dark-bgColor;
    overflow-y: scroll;

    &_header {
        padding: .08rem .18rem;
        font-size: .16rem;
        color: $content-fontcolor;
        text-align: center;
        line-height: .24rem;
        background-color: $bgColor;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        display: flex;
        justify-content: space-between;
    }

    &_form {
        margin-top: .4rem;
        padding: 0 .18rem;
        background-color: $bgColor;
        font-size: .14rem;

        .form_item {
            display: flex;
            padding: .12rem;
            line-height: .2rem;
            border-top: .01rem solid $content-bgColor;

            &_content {
                flex: 1;
                margin-left: .08rem;
                border: none;
                outline: none;
            }
        }
    }
}
</style>